import Html2Canvas from 'html2canvas'
import JsPdf from 'jspdf'

export function pageToPdf(targetDom,name,type,showHeight,showWidth,pageNum) {
    // let cloneDom = targetDom.cloneNode(true)
    // cloneDom.style.width = targetDom.scrollWidth + 'px'
    // cloneDom.style.height = targetDom.scrollHeight + 'px'
    // cloneDom.style.background = '#FFFFFF'
    // document.body.appendChild(cloneDom)
    let scale = 2;
    return Html2Canvas(targetDom, {
        allowTaint: true,
        useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
        height: showHeight ? showHeight : targetDom.scrollHeight, 
        width:  showWidth ? showWidth : targetDom.scrollWidth,
        scale: scale // 提升画面质量，但是会增加文件大小
      }).then(function (canvas) {
        /**jspdf将html转为pdf一页显示不截断，整体思路：
         * 1. 获取DOM 
         * 2. 将DOM转换为canvas
         * 3. 获取canvas的宽度、高度（稍微大一点）
         * 4. 将pdf的宽高设置为canvas的宽高
         * 5. 将canvas转为图片
         * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
         */
        // 得到canvas画布的单位是px 像素单位
        if(type == 'onePage'){
          var contentWidth = canvas.width
          var contentHeight = canvas.height
          
          console.log('contentWidth', contentWidth)
          console.log('contentHeight', contentHeight)
          // 将canvas转为base64图片
          var pageData = canvas.toDataURL('image/jpeg', 1.0)

          // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
          // 2为上面的scale 缩放了2倍
          var pdfX = (contentWidth + 10) / 2 * 0.75
          var pdfY = (contentHeight + 500) / 2 * 0.75 // 500为底部留白

          // 设置内容图片的尺寸，img是pt单位 
          var imgX = pdfX;
          var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

          // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
          var PDF = new JsPdf('', 'pt', [pdfX, pdfY])

          // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
          PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
          PDF.save(name + '.pdf')
        }else{
          var pdf = new JsPdf('p', 'mm', 'a4') // A4纸，纵向
          var ctx = canvas.getContext('2d')
          var a4w = 170
          var a4h = 280 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
          var imgHeight = Math.floor(a4h * canvas.width / a4w) - (scale * 20);  // 按A4显示比例换算一页图像的像素高度
          console.log('rea:'+imgHeight)
          var renderedHeight = 0
          // debugger
          while (pageNum > 0) {
            var page = document.createElement('canvas')
            page.width = canvas.width
            page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页

            // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
            page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
            pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
            
            renderedHeight += imgHeight
            pageNum --;
            if (pageNum > 0) {
              pdf.addPage()
            }// 如果后面还有内容，添加一个空页
            // delete page;
          }
          pdf.save(name + '.pdf')
        }
      })

}
